<script setup lang="ts">
import { ref, type Ref } from 'vue'

const imgBox = ref()

const myModalRef = ref()
// 要预览的图片的地址
let previewImgScr = ref<string>('')

// 图片列表
const imgList: Ref<HTMLImageElement[]> = ref([])
const imgFileList: Ref<File[]> = ref([])

const uploadImg = (e: Event) => {
  let input = e.target as HTMLInputElement
  if (input.files && input.files.length > 0) {
    let file = input.files[0]
    // console.log('file=', file)
    getBase64(file)
  }
}

const getBase64 = (file: File) => {
  return new Promise((resolve, reject) => {
    let reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = event => {
      if (event.target) {
        let img = new Image()
        img.setAttribute('width', '120px')
        img.setAttribute('height', '120px')
        img.setAttribute('float', 'left')
        img.src = reader.result as string
        // imgBox.value.appendChild(img)
        imgList.value.push(img)
        imgFileList.value.push(file)
        emit('sendImgList', imgFileList.value)

        resolve(reader.result)
      } else {
        reject(new Error('Unable to read the file'))
      }
    }
    reader.onerror = error => {
      reject(error)
    }
  })
}

const deleteImg = (index: number) => {
  imgList.value.splice(index, 1)
  imgFileList.value.splice(index, 1)
  emit('sendImgList', imgFileList.value)
}

// 开启预览
const openPreview = (src: string) => {
  previewImgScr.value = src
  myModalRef.value.showModal()
}

const emit = defineEmits<{
  sendImgList: [list: File[]]
}>()
</script>

<template>
  <!-- 图片列表 -->
  <div ref="imgBox" class="imgBox" v-for="(item, index) in imgList" style="position: relative">
    <img :src="item.src" :key="index" @click="openPreview(item.src)" />
    <div
      @click="deleteImg(index)"
      style="
        position: absolute;
        bottom: 105px;
        left: 100px;
        z-index: 2;
        width: 20px;
        height: 20px;
        cursor: pointer;
        color: red;
        font-size: 20px;
        font-weight: bolder;
      "
    >
      <div
        style="
          background: rgba(240, 242, 245, .8);
          width: 120px;
          height: 23px;
          position: absolute;
          left: -100px;
          top: 5px;
          z-index: -1;
        "
      ></div>
      <DeleteFilled />
    </div>
  </div>

  <!-- 上传按钮 -->
  <div class="file-upload">
    <label class="label">选择图片</label>
    <span class="upload-button"></span>
    <input type="file" @change="uploadImg" accept="image/png,image/jpeg,image/gif" />
  </div>

  <!-- 预览 -->
  <MyModal title="预览" ref="myModalRef" :width="800">
    <template #content>
      <div style="height: 800px; width: 400px; margin: 0 auto;">
        <img style="height: 100%; width: 100%;" :src="previewImgScr" />
      </div>
    </template>
  </MyModal>
</template>

<style lang="less" scoped>
.imgBox {
  background: pink;
  // width: 120px;
  height: 120px;
  float: left;
  margin-right: 10px;

  img {
    width: 120px;
    height: 120px;
  }
}

.file-upload {
  position: relative;
  width: 120px;
  height: 120px;
  border: 1px solid #262626;
  display: flex;
  justify-content: space-between;

  // 关键
  float: left;
}

.label {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 76%;
}

.upload-button::before,
.upload-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30%;
  height: 1px;
  background-color: black;
  z-index: 10;
}

.upload-button::before {
  transform: translate(-50%, -50%);
}

.upload-button::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

input[type='file'] {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 120px;
  opacity: 0;
}
</style>
